/* =========================================================
   SIMPLE PC HELP
   DESKTOP SERVICE HERO
   Reusable across all desktop service pages
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.service-hero {
    background: #f7faff;
    padding: 32px 0;
    overflow: hidden;
}


/* =========================================================
   CONTAINER & MAIN ROW
   ========================================================= */

.service-hero .hero-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.service-hero .hero-row {
    align-items: flex-start;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.service-hero .hero-content {
    padding-right: 48px;
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-self: flex-start !important;
    min-width: 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.service-hero .hero-title {
    margin: 0 0 12px !important;
    color: #243163 !important;
    font-size: 52px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.service-hero .hero-subtitle {
    margin: 0 0 14px;
    color: #243163;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
}


/* =========================================================
   INTRODUCTION TEXT
   ========================================================= */

.service-hero .hero-text {
    max-width: 650px;
    margin: 0 0 20px;
    color: #4c5568;
    font-size: 17px;
    line-height: 1.65;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.service-hero .hero-benefits {
    width: 100%;
    margin: 0 0 12px !important;
}


/* =========================================================
   BENEFIT ROW
   Explicit layout to keep Safari consistent
   ========================================================= */

.service-hero .hero-benefits-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   BENEFIT COLUMNS
   Force all three columns to equal width
   ========================================================= */

.service-hero .hero-benefits-row > * {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;

    padding-left: 0 !important;
    padding-right: 12px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   INDIVIDUAL BENEFIT
   ========================================================= */

.service-hero .hero-benefit-inner {
    display: flex !important;
    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   BENEFIT ICON
   ========================================================= */

.service-hero .hero-benefit-icon {
    display: block;
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    object-fit: contain;
}


/* =========================================================
   BENEFIT CONTENT
   ========================================================= */

.service-hero .hero-benefit-content {
    min-width: 0;
}


/* =========================================================
   BENEFIT TITLE
   ========================================================= */

.service-hero .hero-benefit-title {
    margin: 0 0 5px;

    color: #243163;

    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
}


/* =========================================================
   BENEFIT DESCRIPTION
   ========================================================= */

.service-hero .hero-benefit-text {
    margin: 0;

    color: #687083;

    font-size: 15px;
    line-height: 1.4;
}


/* =========================================================
   PREFER TO CALL
   ========================================================= */

.service-hero .hero-call-contact {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 14px;
    margin-bottom: 12px !important;

    color: #243163;

    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   TELEPHONE NUMBERS
   ========================================================= */

.service-hero .hero-call-number {
    margin: 0;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   PHONE / MOBILE ICONS
   ========================================================= */

.service-hero .hero-call-contact-icon {
    display: block;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    object-fit: contain;

    transform: translateY(-5px);
}


/* =========================================================
   DESKTOP HERO BUTTON CONTAINER
   ========================================================= */

.service-hero .desktop-hero-buttons,
.service-hero .desktop-banner-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   SHARED DESKTOP HERO BUTTON FORMAT
   ========================================================= */

.desktop-hero-button-primary,
.desktop-hero-button-secondary {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border-radius: 5px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    text-align: center !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.desktop-hero-button-primary {
    color: #ffffff !important;

    background-color: #004AD8 !important;

    border: 2px solid #004AD8 !important;
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.desktop-hero-button-secondary {
    color: #004AD8 !important;

    background-color: #ffffff !important;

    border: 2px solid #004AD8 !important;
}


/* =========================================================
   BUTTON HOVER / FOCUS
   ========================================================= */

.desktop-hero-button-primary:hover,
.desktop-hero-button-primary:focus,
.desktop-hero-button-secondary:hover,
.desktop-hero-button-secondary:focus {
    color: #ffffff !important;

    background-color: #55AC2D !important;

    border-color: #55AC2D !important;

    text-decoration: none !important;
}


/* =========================================================
   RIGHT IMAGE COLUMN
   ========================================================= */

.service-hero .hero-image-col {
    min-height: 500px;
    position: relative;
}


/* =========================================================
   IMPORTANT — PAGE-SPECIFIC HERO IMAGES

   Keep this desktop hero CSS identical on every service page.

   The actual hero image belongs in the individual page's
   Header code.

   Each hero image should be created to the same dimensions
   and composition:

   - Left approximately 50% reserved for readable content
   - Main device/object kept on the right-hand side
   - Main subject must not cross significantly into the
     left-hand text area
   - Fade/soft background transition built into the image
   - Do not compensate for a badly composed image by changing
     this shared CSS

   ========================================================= */

/* =========================================================
   HERO BENEFITS — FIXED DESKTOP WIDTHS
   ========================================================= */

.service-hero .hero-benefit-inner {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
}

@media (min-width: 992px) {
    #desktop-hero {
        padding-top: 032px !important;
    }

    #desktop-hero > .hero-container {
        padding-top: 0 !important;
    }
}

/* Remote Support hero — 13 October 2026. */
@media (min-width: 992px) {
  .remote-support-page .hero-page-image {
    background-image: url("/img/desktop-hero-remote-support.png") !important;
    background-size: auto 100% !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
  }
}


/* Drop-Off Support hero — 13 October 2026. */
@media (min-width: 992px) {
  .drop-off-support-page .hero-page-image {
    background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.97) 38%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 68%), url("/img/desktop-hero-drop-off.png") !important;
    background-size: 100% 100%, auto 100% !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
  }
}



/* At-Home Support hero — 13 October 2026. */
@media (min-width: 992px) {
  .at-home-support-page .hero-page-image {
    background-image: url("/img/desktop-at-home%20service.png") !important;
    background-size: auto 100% !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
  }
}

/* moving-to-a-new-pc — 13 October 2026 */
@media (min-width: 992px) {
 .moving-to-a-new-pc-page .hero-moving-new-pc {
  background-image: url("/img/desktop-hero-moving-to-a-new-pc.png") !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* computer-mot — 13 October 2026 */
@media (min-width: 992px) {
 .computer-mot-page .hero-page-image {
  background-image: url("/img/desktop-hero-computer-mot.png?v=2") !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* simple-backups — 13 October 2026 */
@media (min-width: 992px) {
 .simple-backups-page .hero-page-image {
  background-image: url("/img/desktop-hero-simple-backup.png?v=2") !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* data-wipe-and-recycling — 13 October 2026 */
@media (min-width: 992px) {
 .data-wipe-and-recycling-page .hero-page-image {
  background-image: url("/img/desktop-hero-data-wipe-and-recycling.png") !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* android-phone-and-tablet-cleanup — 13 October 2026 */
@media (min-width: 992px) {
 .android-phone-and-tablet-cleanup-page .hero-page-image {
  background-image: url("/img/desktop-android-phone-and-tablet-cleanup.png") !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* ipad-and-iphone-upgrade-help — 13 October 2026 */
@media (min-width: 992px) {
 .ipad-and-iphone-upgrade-help-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-ipad-and-iphone-replacement-help.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* eset-protection — 13 October 2026 */
@media (min-width: 992px) {
 .eset-protection-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-eset-protection.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* get-eset-security — 13 October 2026 */
@media (min-width: 992px) {
 .get-eset-security-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-eset-protection.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* scam-protection — 13 October 2026 */
@media (min-width: 992px) {
 .scam-protection-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-scam-protection.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* online-security-and-password-help — 13 October 2026 */
@media (min-width: 992px) {
 .online-security-and-password-help-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-online-security-and-password-help.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* digital-legacy-preparation — 13 October 2026 */
@media (min-width: 992px) {
 .digital-legacy-preparation-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-digital-legacy-and-emergency-access.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* freshen-up-your-windows-pc — 13 October 2026 */
@media (min-width: 992px) {
 .freshen-up-your-windows-pc-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-freshen-up-your-windows-pc.png?v=2") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* printer-problems — 13 October 2026 */
@media (min-width: 992px) {
 .printer-problems-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-printer-problems.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* services — 13 October 2026 */
@media (min-width: 992px) {
 .services-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-services.png?v=2") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* get-in-touch — 13 October 2026 */
@media (min-width: 992px) {
 .get-in-touch-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-get-in-touch.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* remote-support-guide — 13 October 2026 */
@media (min-width: 992px) {
 .remote-support-guide-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-remote-support-guide.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* faqs — 13 October 2026 */
@media (min-width: 992px) {
 .faqs-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-faqs.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* terms-and-conditions — 13 October 2026 */
@media (min-width: 992px) {
 .terms-and-conditions-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-terms-and-conditions.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* privacy-policy — 13 October 2026 */
@media (min-width: 992px) {
 .privacy-policy-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-privacy-policy.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* reviews — 13 October 2026 */
@media (min-width: 992px) {
 .reviews-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-reviews.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* digital-legacy-and-emergency-access — 13 October 2026 */
@media (min-width: 992px) {
 .digital-legacy-and-emergency-access-page .hero-page-image {
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-digital-legacy-and-emergency-access.png") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
 }
}

/* Keep desktop benefit text within its own column at laptop widths. */
@media (min-width: 992px) {
 body .service-hero .hero-benefit-inner {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
 }
 body .service-hero .hero-benefit-icon-col {
  flex: 0 0 36px !important;
  width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
 }
 body .service-hero .hero-benefit-content-col {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
 }
}

/* Computer MOT — blend the image edge into the content background. */
@media (min-width: 992px) {
 .computer-mot-page .hero-page-image {
  background-color: #ffffff !important;
  background-image: linear-gradient(to right, #ffffff 0%, #ffffff 40%, rgba(255,255,255,0.94) 56%, rgba(255,255,255,0) 78%), url("/img/desktop-hero-computer-mot.png?v=2") !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: left top, right center !important;
  background-repeat: no-repeat !important;
 }
}